﻿@model IEnumerable<MusicOnLine.Models.Artist>
@{
    string oldStr = "";
    }


@foreach (var item in Model)
{
    if (oldStr != item.StartWith)
    {    
        <div class="divArtist" style="height:5px; display:none;"></div>  
        <div id="div@(item.StartWith)" class="divArtist" style=" font-style:italic;  font-weight:900; display:none;">@item.StartWith</div>
        <hr class="divArtist" />
        <div class="divStart" style=" font-style:italic;  font-weight:900; display:none;"><a class="aStartWith"  href="#">@item.StartWith</a></div>
       
    oldStr = item.StartWith;
    }    
    <div class="divArtist" style=" display:none;">@Html.ActionLink(item.ArtistName, "SingerAlbums", "AACInfo", new { ID = item.ID }, null)</div>
}
<div>    
    <div id="divArtContent"  style="margin-left:10px; width:900px; height:460px; overflow-y:hidden; position:relative; ">
        <div id="divArtists"></div>
    </div>
    <div  style="float:left; width:10px; margin-left:10px;">
        <div id="divStartWith"></div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {      
        $(".divStart").insertAfter($("#divStartWith"));
        $(".divStart").show();
        $(".divArtist").insertAfter($("#divArtists"));
        $(".divArtist").show();
        $(".aStartWith").click(function () {            
            var sw = $(this).text();
            var pTop = $("#div" + sw).position().top;
            //alert($("#div" + sw).position().left + "," + $("#div" + sw).position().top);
            //alert(pTop + ";" + $("#divArtContent").scrollTop());
            if (pTop != 0) {
                var scrollTop = $("#divArtContent").scrollTop();
                $("#divArtContent").scrollTop(pTop + scrollTop - 5);
            }           
        });      
       })
</script>